<template>
    <div id="inventoryTpl">
        <el-dialog
        title="新建盘库任务"
        :visible.sync="dialogVisible"
        top="10vh"
        :close-on-click-modal="false"
        :before-close="handleClose"
        >
            <el-form v-model="formData" label-width="80px" label-position="left">
                <el-form-item label="选择仓库:">
                    <el-select class="select-prefix" size="small" v-model="formData.warehouseId" placeholder="请选择仓库" filterable clearable @change="handleWarehouseChange">
                        <el-option v-for="(item, index) in warehouseList" :value="item.warehouseId" :label="item.warehouseName" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="盘库类型:">
                    <el-radio-group v-model="formData.isCheckedAll">
                        <el-radio :label="1">抽盘</el-radio>
                        <el-radio :label="0">全盘</el-radio>
                    </el-radio-group>
                    <template v-if="formData.isCheckedAll == 1">
                        <el-select size="small" v-model="brandsObj" @change="handleChange" placeholder="请选择品牌" filterable>
                            <el-option v-for="(item, index) in brandList" :key= "index" :label="item.brandName" :value='item.brandCode +"," +item.brandName'></el-option>
                        </el-select>
                        <div class="brandsbox">
                            <el-tag style="margin: 0 2px 2px 0" size="small" type="success" closable v-for="(item, index) in brandTags" :key="index" @close="handleCloseTags(index)">{{item.split(',')[1]}}</el-tag>
                        </div>
                    </template>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleClose">取 消</el-button>
                <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        props: ['isShow'],
        computed: {
            dialogVisible: {
                get() {
                    return this.isShow
                },
                set() {}
            }
        },
        data() {
            return {
                user: JSON.parse(sessionStorage.getItem('userInfo')),
                formData: {
                    warehouseId: '',
                    isCheckedAll: 1,
                    brandVoList: []
                },
                brandList: [],
                brandsObj: '',
                brandTags: [],
                warehouseList: []
            }
        },
        watch: {
            formData(val) {
                console.log(val, 'val')
            }
        },
        mounted() {
            this.getStockList()
        },
        methods: {
            /** 获取仓库列表 */
            getStockList() {
                this.$server.storeWarehouseController.getAllWarehouseList().then(res => {
                    this.warehouseList= res.data
                })
            },
            handleWarehouseChange() {
                this.getAllBrandsList()
            },
            /** 获取全部品牌 */
            getAllBrandsList() {
                this.brandList= []
                this.brandTags= []
                this.$server.stockControlApi.getWarehouseAllBrands(this.formData.warehouseId).then(res => {
                    this.brandList= res.data
                })
            },
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                    this.$emit('cancelShow', false)
                }).catch(_ => {});
            },
            handleChange(val) {
                if(this.brandTags.indexOf(val) == -1) {
                    this.brandTags.push(val)
                    this.brandsObj= ''
                }else {
                    this.$alert('品牌已存在，请勿重复添加！！').then(_ => {
                        this.brandsObj= ''
                    })
                }
            },
            handleCloseTags(val) {
                this.brandTags.splice(val, 1)
            },
            handleSubmit() {
                if(this.formData.isCheckedAll == 1 && this.brandTags.length <1) {
                    this.$message({
                        message: '抽盘任务，必须添加品牌',
                        type: 'warning',
                        duration: 1500
                    })
                } else if(this.formData.warehouseId == '') {
                    this.$message({
                        message: '请选择仓库',
                        type: 'warning',
                        duration: 1500
                    })
                }else {
                    
                    let brandVoList= [];
                    if(this.brandTags.length > 0) {
                        this.brandTags.forEach(item => {
                            brandVoList.push(
                                {
                                    brandCode: item.split(',')[0],
                                    brandName: item.split(',')[1],
                                }
                            )
                        })
                    }else{
                        brandVoList= []
                    }
                    let params= {
                        createUser: this.user.personName,
                        createUserId: this.user.userId,
                        countType: this.formData.isCheckedAll,
                        warehouseId: this.formData.warehouseId,
                        brandVoList: brandVoList
                    }
                    this.$server.stockControlApi.createInventory(params).then(res => {
                        this.$emit('cancelShow', false)
                        this.$emit('getInventoryList')
                    })
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .brandsbox {
        display: flex;
        box-sizing: border-box;
        padding: 10px;
        border: 1px solid #ff7068;
        border-radius: 5px;
        min-height: 100px;
    }
</style>